Get channel data

Fetching channel data is a critical part of building and customizing your checkout process or online store with Afosto. This information helps you style your interface based on the settings available in the channel settings.

To fetch the channel data, we utilize a GraphQL query to call for the desired settings from the Afosto server. The Storefront JavaScript Client allows you to perform this action efficiently.

Channel Data

The channel data provides various attributes to help you customize your store's appearance and functionality. This data includes:

Colors

For the colors, you can select a primary color and a text color. These are stored as a hex color code that you can use to style your checkout elements.

Style

This can either be STRAIGHT or ROUNDED. You can use this setting to define the border radius of elements. For example, the radius of the buttons and inputs in your checkout.

Links

These include the links to your checkout page (CHECKOUT), privacy policy page (PRIVACY_AGREEMENT), terms and conditions page (TERMS_CONDITIONS), and the main site for which the channel is created (VENDOR).

Logo & Favicon

URLs for the logo and favicon that you've uploaded in your channel settings.

Locale

The defined locale setting for your channel.

GraphQL Query

Here is an example of how to fetch this data using a GraphQL query:

1import StorefrontClient, { gql } from '@afosto/storefront';
2
3const client = StorefrontClient({
4  storefrontToken: 'STOREFRONT_TOKEN',
5});
6
7const query = gql`
8  query GetChannelData {
9    channel {
10      name
11      type
12      logo
13      locale
14      favicon
15      business {
16        name
17        messaging {
18          sender {
19            name
20            address
21          }
22        }
23      }
24      branding {
25        colors {
26          primary
27          text
28        }
29        style
30      }
31      links {
32        type
33        value
34      }
35    }
36  }
37`;
38
39const response = await client.query(query, variables);

When you use a storefront token for the client, the channel ID that is linked to the storefront token will be used for the query. This will fetch all the channel settings and attributes that you can use to style and configure your checkout or store.

By mastering the use of this query, you'll be able to customize your Afosto store's checkout process to match your branding and business needs.